<template>
  <div class="">
    <!-- pc 搜索 -->
    <div class="h-[7.5rem] lg:flex justify-center items-center hidden relative z-20">
      <img
        loading="lazy"
        class="absolute top-0 left-0 z-[-1] size-full"
        src="https://cd.sealmg.com/assets/img/search-box-bg.png"
        alt="Search background"
        title="Search section background"
        srcset=""
      />
      <div
        class="w-[37.5rem] h-[3.5rem] rounded-[1.8125rem] border-[.125rem] has-[:focus]:ring-2 has-[:focus]:ring-[#FF967B]/50 border-solid border-[#FF967B] gap-[1.25rem] flex items-center px-[1.875rem]"
      >
        <div class="flex-1 flex justify-between gap-[1.25rem] items-center">
          <input
            type="text"
            class="outline-none text-[1rem] flex-1 text-[#262626] !bg-transparent"
            :placeholder="`${$t('pages.searchPlaceholder')}`"
            v-model="searchterms"
            @keyup.enter="searchNews"
          />
          <i v-if="searchterms" class="el-icon-circle-close text-[1.25rem] text-[#999999] flex-none cursor-pointer" @click="clearSearch"></i>
        </div>
        <span class="w-[.0625rem] h-[1.5rem] border-[.0625rem] border-solid border-[#E5E5E5]"></span>
        <i @click="searchNews" class="text-[#999999] el-icon-search text-[1.25rem] cursor-pointer"></i>
      </div>
    </div>
    <!-- h5 搜索 -->
    <div class="p-4 bg-[#F0F0F0] max-lg:block hidden">
      <div class="w-full h-[2rem] rounded-full bg-white flex items-center px-4 gap-4">
        <div class="flex-1 flex justify-between gap-[1.25rem] items-center">
          <input
            type="text"
            class="outline-none text-[.75rem] flex-1 text-[#262626] placeholder:italic"
            :placeholder="`${$t('pages.searchPlaceholder')}`"
            v-model="searchterms"
            id="ff"
          />
          <i v-if="searchterms" class="el-icon-circle-close text-[1.25rem] text-[#999999] flex-none cursor-pointer" @click="clearSearch"></i>
        </div>
        <span class="w-[0.06rem] h-[0.88rem] border-[0.06rem] border-solid border-[#E5E5E5]"></span>
        <i @click="searchNews" class="text-[#999999] el-icon-search text-[1.25rem] cursor-pointer"></i>
      </div>
    </div>
    <!-- 新闻列表 -->
    <div class="bg-white">
      <div class="max-w-6xl lg:py-[2.5rem] mx-auto max-lg:px-4 max-lg:pb-4">
        <!-- <div
        class="max-lg:mb-4 grid grid-cols-4 place-items-center py-3 border-b"
      >
        <div
          v-for="(i, k) in 4"
          :key="k"
          class="cursor-pointer lg:text-[1.25rem] text-[0.81rem] select-none"
          :class="k === 0 ? 'text-[#000] font-medium' : 'text-[#999999] '"
        >
          综合{{ i }}
        </div>
      </div> -->
        <!-- res -->
        <div class="py-[.75rem] text-[#999999] text-[.875rem] lg:flex hidden items-center gap-2">
          <span class="capitalize">
            {{ $t('pages.searchResult') }}
          </span>
          <span class="text-[#000]">{{ total }}</span>
        </div>
        <!-- content -->
        <no-data type="search" v-if="total == 0" :loading="loading"></no-data>
        <nuxt-link
          class="border-b lg:py-[2.5rem] max-lg:py-1 flex lg:gap-[1.25rem] gap-4 group transition-all cursor-pointer"
          v-for="(i, k) in searchData"
          :key="k"
          :to="localePath(`/news/${i.code}`)"
        >
          <div class="lg:w-[25%] aspect-video max-lg:w-1/3 flex-none overflow-hidden border">
            <!-- $globalFn.imgPrefixUrl(newsdetail.info.cover) -->
            <img
              v-lazy="$globalFn.imgPrefixUrl(i.cover)"
              class="group-hover:scale-110 size-full object-cover duration-300"
              alt="Search result thumbnail"
              title="Article preview image"
              loading="lazy"
            />
            <!-- <div class="group-hover:scale-110 size-full duration-300"></div> -->
          </div>
          <div class="flex flex-col flex-1 justify-between">
            <h1
              class="lg:ext-[1.125rem] lg:line-clamp-2 line-clamp-1 max-lg:text-[0.88rem] group-hover:text-[#FF4E33] duration-300 group-hover:underline group-hover:underline-offset-4"
            >
              {{ i.title }}
            </h1>
            <div class="flex justify-between items-center">
              <el-tag type="danger" size="small">{{ i.category.name }}</el-tag>
              <div class="flex items-center gap-[.625rem] text-[#999999] lg:text-[.875rem] max-lg:text-[0.63rem]">
                <!-- <div class="size-[1.5rem] rounded-full"></div> -->
                <!-- <span>SEALFM官方</span> -->
                <span>{{ i.publish_time_text }}</span>
              </div>
            </div>
          </div>
        </nuxt-link>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    // name: "journalismSearch",
    layout: 'newsPage',
    head: {
      title: 'news-searchFor',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'news-searchFor'
        }
      ]
    },
    data() {
      return {
        searchterms: '', //搜索词
        searchData: [], //搜索结果数据数组
        total: 0, //搜索结果总数
        loading: false
      }
    },
    created() {},
    beforeDestroy() {
      // 组件销毁前移除全局键盘事件监听
    },
    methods: {
      // 清空搜索词
      clearSearch() {
        this.searchterms = ''
        this.searchData = []
        this.total = 0
      },
      // 去新闻详情页
      getNewsDetailPath(item) {
        const formattedCode = item.code.replace(/\s+/g, '-')
        return this.localePath(`/news/${formattedCode}`)
      },
      // 新闻搜索列表
      async searchNews() {
        if (!this.searchterms?.trim()) return
        this.loading = true
        try {
          const res = await this.$axios.get('api/news/search', {
            params: {
              cid: '',
              keyword: this.searchterms,
              page: 1,
              limit: 9999
            }
          })
          this.searchData = res.data || []
          this.total = res.total
          this.loading = false
        } catch (error) {
          this.loading = false
          console.error('搜索新闻失败:', error)
          // 可以添加错误提示
        }
      }
    }
  }
</script>
<style lang="less" scoped></style>
